<!--
    Copyright (c) 2023 Amphion.
    This source code is licensed under the MIT license found in the
    LICENSE file in the root directory of this source tree。
-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1200px, initial-scale=1.0">
    <title>SingVisio: Visual Analytics of Diffusion Model for Singing Voice Conversion</title>
    <script>
        const baseLink = ''; // end without '/'
    </script>
    <!-- Load Tailwind CSS and D3.js -->
    <script src="./resources/tailwind.js"></script>
    <script src="./resources/d3.v4.min.js"></script>
    <script src="./resources/htl.min.js"></script>
    <!-- Load the Guide driver -->
    <script src="./resources/driver.js.iife.min.js"></script>
    <link rel="stylesheet" href="./resources/driver.min.css">
    <!-- Config Tailwind CSS -->
    <script type="module">
        import cfg from "./tailwind.config.js";
        tailwind.config = cfg;
    </script>
    <style type="text/tailwindcss">
        @layer components {
        .btn-small {
            @apply px-3 py-2 text-xs font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700
        }
        .btn {
            @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
        }
        .btn-sec {
            @apply py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700
        }
        .select-select {
            @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
        }
        .select-label {
            @apply block mb-1 text-sm font-medium text-gray-900 dark:text-white;
        }
        .card {
            @apply p-6 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700
        }
        .card-title {
            @apply mb-2 text-base font-bold tracking-tight text-gray-900 dark:text-white
        }
        .timeline-point {
            @apply absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700
        }
        .timeline-title {
            @apply text-lg font-semibold text-gray-900 dark:text-white
        }
        .timeline-subtitle {
            @apply text-base font-normal text-gray-500 dark:text-gray-400
        }
        .small-input {
            @apply block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
        }
        .checkbox {
            @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600
        }
        .dropdown_button_text {
            @apply w-full text-sm font-medium text-gray-900  dark:text-white text-left
        }
        .dropdown_button {
            @apply btn-sec flex items-center w-full disabled:cursor-not-allowed disabled:opacity-50
        }
        }
        </style>
    <style>
        input.step-axis {
            outline: none;
            -webkit-appearance: none;
            background: #0000002b;
            height: 8px;
        }

        input.step-axis::-webkit-slider-thumb {
            -webkit-appearance: none;
            position: relative;
            width: 18px;
            height: 18px;
            background: url("./img/syllable.png") no-repeat;
            background-size: 18px;
            border-radius: 50%;
            cursor: pointer;
        }

        audio {
            outline: none;
            height: 34px;
        }
    </style>
</head>

<body class="bg-gray-100 dark:bg-gray-900">
    <div id="alert"
        class="hidden fixed top-0 right-0 left-0 z-50 w-full h-[100vh] bg-black bg-opacity-50 justify-center items-center overflow-y-hidden">
        <div class="card flex flex-col min-w-[400px] max-w-2xl max-h-[80vh] p-0 overflow-hidden">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 id="alert_title" class="text-xl font-semibold text-gray-900 dark:text-white">
                    Title
                </h3>
                <button id="close_alert" type="button"
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div id="alert_text"
                class="p-4 md:p-5 space-y-4 text-base leading-relaxed text-gray-700 dark:text-gray-200 overflow-y-auto">
                Text
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button id="finish_alert" type="button"
                    class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">OK</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 w-full py-4 px-6 border border-b border-gray-200 dark:border-gray-600">
        <div class="mx-auto max-w-[1490px] grid grid-cols-6 align-center items-center">
            <!-- <img class="dark:hidden" src="img/cuhksz_logo.png" alt="cuhksz logo" class="h-[40px]">
            <img class="hidden dark:block" src="img/cuhksz_logo_white.png" alt="cuhksz logo" class="h-[40px]"> -->
            <span class="col-span-1"></span>
            <span id="title" class="col-span-4 mx-auto font-[800] text-[20px] dark:text-white">SingVisio: Visual
                Analytics of Diffusion Model for Singing Voice Conversion</span>
            <!-- <span class="ml-auto mr-0 text-sm dark:text-white">Team: <i>Human Language Technology Lab,
                    CUHK-Shenzhen</i></span> -->
            <div class="flex">
                <button class="btn-small ml-auto" id="help">Help?</button>
            </div>
        </div>
    </div>
    <div class="max-w-[1500px] m-auto">
        <div class="flex flex-row items-start gap-1 py-3 p-1">
            <div class="w-[300px] flex flex-col flex-none">
                <div id="performance" class="card p-2 mb-2 flex flex-col flex-none relative">
                    <button class="absolute right-1 top-1 btn-small px-1.5 py-0.5 ml-auto rounded-full"
                        id="metrics_help">?</button>
                    <div class="flex flex-row">
                        <div id="histogram" class="flex-none"></div>
                        <div id="histogram2" class="flex-none"></div>
                    </div>
                    <span class="text-[12px] mx-auto dark:text-white">Metrics</span>
                </div>

                <div id="touch_map" class="card p-2 relative">
                    <button class="absolute right-1 top-1 btn-small px-1.5 py-0.5 ml-auto rounded-full"
                        id="projection_help">?</button>
                    <div class="flex mb-1 align-center items-center space-between dark:text-white">
                        <div class="ml-1 text-sm">Step: <span id="current_step_display_number"></span></div>
                        <div class="ml-auto flex mr-2">
                            <div class="flex items-center mr-2">
                                <input id="text_id" type="checkbox" value="" class="checkbox">
                                <label for="text_id"
                                    class="ml-1 text-[0.775rem] font-medium text-gray-900 dark:text-gray-300">Show Step
                                    Number</label>
                            </div>
                            <button class="btn-sec h-9 w-9 p-2.5 mb-0" id="reset_map">
                                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 18 20">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div id="dataviz_axisZoom" class="mx-auto w-fit border bg-white dark:bg-gray-800"></div>
                </div>
            </div>
            <div class="w-full">
                <div id="step_preview" class="flex min-w-[500px] w-full bg-white dark:bg-gray-800 p-2 card mb-2">
                    <div class="mx-auto" id="preview_container">
                    </div>
                    <div class="mx-auto" id="preview_container2">
                    </div>
                    <div class="flex flex-col">
                        <button class="btn-sec" id="refreshpreview">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 18 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div id="mel_card_container" class="grid grid-cols-3 min-w-[915px] w-full gap-1 justify-items-center">
                </div>
                <div id="tips">
                </div>
            </div>
            <div class="shrink-0 w-[180px]">

                <div class="card py-3 px-3 relative">
                    <button class="absolute right-1 top-1 btn-small px-1.5 py-0.5 ml-auto rounded-full"
                        id="control_help">?</button>
                    <div class="flex items-center">
                        <h5 class="card-title text-lg">Control Panel</h5>
                    </div>
                    <div class="flex flex-col w-full gap-y-2 rounded-lg" id="control_panel">
                        <div class="mb-2">
                            <label for="mode_id" class="select-label">Display Mode</label>
                            <select id="mode_id" class="select-select"></select>
                        </div>
                        <div>
                            <label for="sourcesinger_id" class="select-label">Source Singer</label>
                            <button id="sourcesinger_id" class="dropdown_button" type="button">
                                <span class="dropdown_button_text" id="sourcesinger_id_text">Choose Singer</span> <svg
                                    class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>
                            <!-- Dropdown menu -->
                            <div id="sourcesinger_id_dropdown"
                                class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
                                </ul>
                            </div>
                        </div>
                        <div>
                            <label for="song_id" class="select-label">Song</label>
                            <button id="song_id" class="dropdown_button" type="button">
                                <span class="dropdown_button_text" id="song_id_text">Choose Song</span> <svg
                                    class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>
                            <!-- Dropdown menu -->
                            <div id="song_id_dropdown"
                                class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
                                </ul>
                            </div>
                        </div>
                        <div>
                            <label for="target_id" class="select-label">Target Singer</label>
                            <button id="target_id" class="dropdown_button" type="button">
                                <span class="dropdown_button_text" id="target_id_text">Target Singer</span> <svg
                                    class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>
                            <!-- Dropdown menu -->
                            <div id="target_id_dropdown"
                                class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
                                </ul>
                            </div>
                        </div>
                        <div class="relative">
                            <label for="pic_id" class="select-label">Projection Embedding</label>
                            <select id="pic_id" class="select-select"></select>
                        </div>
                    </div>

                    <div id="step_axis" class="mt-4">
                        <label for="range" class="select-label">Step Axis</label>

                        <div
                            class="items-center w-full rounded-lg bg-gray-50 flex flex-row gap-2 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:text-white dark:bg-gray-700">

                            <input class="step-axis my-2 w-full" id="range" type="range" min="0" max="999" value="0"
                                step="1">
                            <button class="btn-small" id="controls">
                                <svg id="icon_play" style="display: none" class="w-3 h-3" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 16">
                                    <path
                                        d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z" />
                                </svg>
                                <svg id="icon_stop" class="w-3 h-3" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 12 16">
                                    <path
                                        d="M3 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm7 0H9a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z" />
                                </svg>
                            </button>

                        </div>
                        <div class="flex gap-1 mt-3">
                            <span class="my-auto mr-1 text-sm font-medium text-gray-900 dark:text-white">Step:</span>
                            <input type="text"
                                class="small-input flex-none w-[60px] text-center bg-white dark:bg-gray-800" id="value">
                            <button class="btn-small" id="add_preview">
                                Pin
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <script src="./resources/init.js"></script>
    <script src="./resources/function.js"></script>
    <script src="./resources/event.js"></script>
    <script>
        initConfig('./config/default.json')
    </script>
</body>